import React, { useState } from "react";
import Headers from '../../compoents/Header'
import './index.scss';
import { Space, Table, Tag } from 'antd';
const { Column, ColumnGroup } = Table;interface DataType {
  key: React.Key;
  firstName: string;
  lastName: string;
  age: number;
  address: string;
  tags: string[];
}

const data: DataType[] = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const Index:React.FC=()=>{
     const text = '页面管理'
     const [tableList,setTableList] = useState([])
     const getTableList=async()=>{
        const config={
            url:'/'
        }
     }
    return(
        <div className="container">
             <Headers text={text}></Headers> 
             <div className="content">
                 <div className="content-top" >
                          <div style={{display:'flex'}}>
                            <p>标题</p>
                            <input type="text" placeholder="请输入文章标题" />
                          </div>

                           <div>
                            <p>分类</p>
                             <select name="" id="">
                                <option value="">请选择</option>
                                <option value="">草稿</option>
                                <option value="">发布</option>
                            </select>
                           </div>
                        
                            <div>
                                <p>分类</p>
                              <select name="" id="">
                                 <option value="">请选择</option>
                                <option value=""></option>
                            </select>     
                           </div>     
                           <div>
                             <button className="search">搜索</button> 
                             <button className="reset">重置</button>
                            </div>     
                </div>
                 <div className="tableList">
                     <Table dataSource={data}>
                            <ColumnGroup title="Name">
                            <Column title="First Name" dataIndex="firstName" key="firstName" />
                            <Column title="Last Name" dataIndex="lastName" key="lastName" />
                            </ColumnGroup>
                            <Column title="Age" dataIndex="age" key="age" />
                            <Column title="Address" dataIndex="address" key="address" />
                            <Column
                            title="Tags"
                            dataIndex="tags"
                            key="tags"
                            render={(tags: string[]) => (
                                <>
                                {tags.map((tag) => {
                                    let color = tag.length > 5 ? 'geekblue' : 'green';
                                    if (tag === 'loser') {
                                    color = 'volcano';
                                    }
                                    return (
                                    <Tag color={color} key={tag}>
                                        {tag.toUpperCase()}
                                    </Tag>
                                    );
                                })}
                                </>
                            )}
                            />
                            <Column
      title="Action"
      key="action"
      render={(_: any, record: DataType) => (
        <Space size="middle">
          <a>Invite {record.lastName}</a>
          <a>Delete</a>
        </Space>
      )}
    />
  </Table>
                 </div>
             </div>
        </div>
    )
}
export default Index